﻿import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,ScrollView } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import '../../assets/animate.min.scss'
import './mall.scss'
import searchimg from './images/search1.png'
import xl from '../../assets/kedouimg01/xl.png'


export default class Index extends Component {  
  constructor(props) {   
    super(props);
    this.state = { 
     type:0,
	   goodslist:'',
	   shoplist:[],
	   name:'',
	   psx:'',
	   psxjg:false,
	   sealx:0,
	   znwns:'',
     pageNumber:0,
     hasNextPage:false,
     scrollPd:false,
	}
  }
  config = {
    navigationBarTitleText: ''
  }

  open(url,type){
    this.$preload({
      type:type
    })
    CommonJs.openTo(url);
  }

  
  componentWillMount () {
	var type=this.$router.preload.type;
	this.setState({
	  type:type
	}) 
    this.getQunName();
		this.getgoods(type,0);
  }
  

  componentDidMount () {
	
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }
  
  getQunName(){
	var dateinfo = Taro.getStorageSync('dateinfo')
    var date1={id:dateinfo.qid}
	var _this=this;
    CommonJs.ajaxRequest('/cluster/getEntityAndLoginId',date1,'GET',function(res){
	  if(res.content){
		Taro.setNavigationBarTitle({title:res.content.name})
	  }
    })  
  }
  getgoods(type,pageNumber){
	var shopId = Taro.getStorageSync('shopId')
	if(type=='cx'){
		return false;
	}
	if(type=='createAt'){
		var url='/mall/papi/v1.9/item?sort=createAt,DESC&shopId='+shopId+'&activeStatus=ENABLE'
	}
    if(type=='saleAmountSort'){
		var url='/mall/papi/v1.9/item?sort=createAt&shopId='+shopId+'&activeStatus=ENABLE'
	}
	if(type=='search'&&this.state.name){
		var keywork=this.state.name;
		//var url='/mall/papi/v1.9/item?name='+this.state.name+'&shopId='+shopId+'&activeStatus=ENABLE'
		//var url='/mall/papi/v1.9/item?name='+this.state.name+'&activeStatus=ENABLE'
		var url='/mall/papi/v1.9/item/search/products?name='+this.state.name+'&activeStatus=ENABLE'
	}
	var sx=this.state.psx;
	if(sx){
		if(sx=='specialPriceSort'){
			url=url+"&"+sx+'='+this.state.psxjg;
		}
		else{
			url=url+"&"+sx+'=true';
		}
	}
	var _this=this;
	if(url){
		var dates={
  		size:20,
  		page:pageNumber
  	}
		CommonJs.ajaxRequest(url,dates,'GET',function(res){
		 
		  if (res) {

  			if(res.data.totalPages>pageNumber){
  		  	var hasNextPage = true;
  		  }
  			else{
  				var hasNextPage = false;
  			}
	      var result = res.data.list
	      var results = _this.state.goodslist
	      if(pageNumber==0){
	      	results=[]
	      }
	      for(var i = 0; i < result.length; i++){
	        results.push(result[i]);
	      }
	      if (hasNextPage) {
	        _this.setState({
	          goodslist: results,
	          znwns: '暂无数据',
	          pageNumber: res.data.page,
	          hasNextPage: hasNextPage,
	          scrollPd: true
	        })
	      }
	      else {
	        _this.setState({
	          goodslist: results,
	          znwns: '暂无数据',
	          pageNumber: res.data.page,
	          hasNextPage: hasNextPage,
	          scrollPd: false
	        })
	      }
	    } else {
	      _this.setState({
	        znwns: '暂无数据'
	      })
	    }
		},'wfw') 
	}
  }
  loadMore(){
    var _this = this
    var pd = _this.state.scrollPd
    if(pd) {
      //防止多次触发滑动到底部事件
      _this.setState({
        scrollPd: false//禁止下拉
      })
      var pageNumber = _this.state.pageNumber + 1
      _this.getgoods(this.state.type,pageNumber)
    }else{
      var hasNextPage =  _this.state.hasNextPage
      if(hasNextPage){
        Taro.showToast({
          title:'正在加载数据...',
          icon: 'none',
          duration: 2000
        })
      }else{
        Taro.showToast({
          title:'没有更多数据啦！',
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
  search(){
		var name=this.state.name;
		if(name){
			if(this.state.sealx==0){
				this.getgoods(this.state.type,0)
			}
			else{
				this.getshop()
			}
		}
		else{
			Taro.showToast({
				title:'请输入商品名字！',
				icon: 'none',
				duration: 2000
			});
		}
  }
  goodsxq(index){
  	var appointed=this.state.goodslist[index].mallTypeId
  	var id=this.state.goodslist[index].id;
  	if(appointed==1){
			this.$preload({
	        type: id,
	        malltype:''
	      })
		}
		else if(appointed==2){
			this.$preload({
	        type: id,
	        malltype:'UC'
	      })
		}
		CommonJs.openTo('/pages/mall/goodsxq') 
  }
  getInputVal(event){
  	var m=event.target;
		var obj={};
		obj[m.id]=m.value
    this.setState(obj)
  }
  getshop(){
  	var url='/crm/papi/v1.9/consultant/query/shopAdvert?typeId=1&shopName='+this.state.name
  	var _this=this;
  	CommonJs.ajaxRequest(url,'','GET',function(res){
		  _this.setState({
			 shoplist:res.data.list
		  })
		},'wfw') 
  }
  px(val){
  	if(val=='sx'){
  		Taro.showToast({
				title:'暂未开通此功能',
				icon: 'none',
				duration: 2000
		  });
  	}
  	else{
  		var lj=false;
  		if(val=='specialPriceSort'){
  			if(this.state.psxjg){
  				lj=false; 
  			}
  			else{
  				lj=true;
  			}
  		}
  	  this.setState({
				psx:val,
				psxjg:lj
		  })
  	  var _this=this;
  	  setTimeout(function(){
  	  	_this.getgoods(_this.state.type,0)
  	  },800)
  	}
  }
  choose(val){
  	var _this=this;
  	_this.setState({
			 name:val,
			 sealx:0
		},function(){
			_this.search()
		})
  	
  }
  choosemd(){
  	var _this=this;
  	Taro.showActionSheet({
		  itemList: ['商品', '门店'],
		  success: function (res) {
		    _this.setState({
					 sealx:res.tapIndex
				})
		  },
		  fail: function (res) {
		    console.log(res.errMsg)
		  }
		})
  	
  }
  getnav(id,did, types,name){
    var _this = this;
    Taro.setStorage({key:'shopId',data:id})
	  Taro.setStorage({key:'dealerId',data:did})
		var url='/clusterShop/getClusterShopByShopId?shopId='+id
  		var _this=this;
		CommonJs.ajaxRequest(url,'','GET',function(res){
			var dateinfo = Taro.getStorageSync('dateinfo')
			if(!dateinfo){
				dateinfo={}
			}
			var qid=''
			if(res.content){
				if(res.content.clusterId){
					qid=res.content.clusterId
				}
			}
			dateinfo.qid=qid
			Taro.setStorage({key:'dateinfo',data:dateinfo})
		  _this.open('/pages/mall/shopindex','')
		})

  }
  render () {
	const goodslist= this.state.goodslist;
	const shoplist= this.state.shoplist;
	const type=this.state.type;
	const name=this.state.name
	const psx=this.state.psx
	const psxjg=this.state.psxjg
    return (
      <View className='page'>
      <ScrollView  scrollY='true' style='height:100%' onScrollToLower={this.loadMore.bind(this,'')}>
        <View className='mallPage'>
			<View className='goods-search' style={type=='search'?'display:block':'display:none;'}>
				<View className='search-choose'>
					<View className='his-li' onClick={this.choosemd.bind(this)}>{this.state.sealx==0?'商品':'门店'}<Image className='xl' mode='widthFix' src={xl}></Image></View>
				</View>
				<Input className='goods-search-input' focus value={this.state.name} onConfirm={this.search.bind(this)}  id='name' onInput={this.getInputVal.bind(this)} type='text' style='border:1px solid #ddd;' placeholder={this.state.sealx==0?'请输入商品关键字':'请输入门店关键字'} />
				<View className='goods-search-btn' onClick={this.search.bind(this)}>
					<Image className='search-img' mode='widthFix' src={searchimg}></Image>
				</View>
			</View>
			<View className='his-search' style={type=='search'&&name==''&&this.state.sealx==0?'display:block':'display:none;'}>
					<View className='his-search-tit'>热门搜索</View>
					<View className='his-search-li'>
							<Text className='his-li' onClick={this.choose.bind(this,'手表')}>手表</Text>
							<Text className='his-li' onClick={this.choose.bind(this,'西装')}>西装</Text>
					</View>
			</View>
			<View style={goodslist.length>0&&this.state.sealx==0?'display:block':'display:none;'}>
				<View className='goods-px'>
						<View className={psx==''?'px-li pxlicur':'px-li'} onClick={this.px.bind(this,'')}>最新</View>
						<View className={psx=='saleAmountSort'?'px-li pxlicur':'px-li'} onClick={this.px.bind(this,'saleAmountSort')}>销量</View>
						<View className={psx=='specialPriceSort'?'px-li pxlicur':'px-li'} onClick={this.px.bind(this,'specialPriceSort')}>
								价格
								<View className='px-li-nr'>
								  <Text className={psxjg?'px-li-stb':'px-li-stb px-li-stbc'}></Text>
								  <Text className={psxjg?'px-li-xtb px-li-xtbc':'px-li-xtb'}></Text>
							  </View>
						</View>
						<View className='px-li' onClick={this.px.bind(this,'sx')}>筛选</View>
				</View>
				
			{goodslist&&goodslist.map((item, index) => (
			<View className='goodsdl'>
				<View className='goodsdt' onClick={this.goodsxq.bind(this,index)}>
					<Image className='goods-logo' mode='scaleToFill' src={item.logoUrl?item.logoUrl:CommonJs.getlogo()}></Image>
				</View>
				<View className='goodsdd'>
					<View className='goods-h3'>{item.name}</View>
					<View className='goods-span'>
						<Text className='goods-i'>销量：{item.saleStock.saleAmount}</Text>
						<Text className='goods-s'>{item.mallTypeId==1?'￥':'UC'}{item.price.specialPrice/100}</Text>
					</View>
				</View>
			</View>
			))}	
			
			
			</View>
			
			<View style={shoplist.length>0&&this.state.sealx==1?'display:block':'display:none;'}>
				
			{shoplist.map((item, index) => (
			<View className='goodsdl'  onClick={this.getnav.bind(this,item.id,item.dealerId,1,item.name)}>
				<View className='goodsdt' style="overflow:hidden;border-radius:10rpx;">
					<Image className='goods-logo' mode='widthFix' src={item.rotationPictures?item.rotationPictures:CommonJs.getlogo()}></Image>
				</View>
				<View className='goodsdd'>
					<View className='goods-h3'>{item.name}</View>
					
				</View>
			</View>
			))}	
			
			
			</View>
			<View style={goodslist.length>0||shoplist.length>0?'display:none':'display:block;'}>
				<View className="nodate">暂无{this.state.sealx==0?'商品':'门店'}</View>
			</View>
		</View>
			</ScrollView>
    </View>
    )
  }
}

